import { ExtractPropTypes, PropType } from 'vue'
import { TuniaoSize, TuniaoSizes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * 自定义图标数据类型
 */
export type RateCustomData = {
  /** index, 自定义信息所在位置 */
  index: number,
  /** 激活时的图标 */
  activeIcon?: string,
  /** 未激活时的图标 */
  inactiveIcon?: string,
  /** 激活时的颜色 */
  activeColor?: string,
  /** 未激活时的颜色 */
  inactiveColor?: string
}

/**
 * props参数
 */
export const rateProps = {
  /** modelValue, 所选中的数量 */
  modelValue: {
    type: Number,
    default: 0
  },
  /** 最大选择数量 */
  max: {
    type: Number,
    default: 5
  },
  /** 最小选择数量 */
  min: {
    type: Number,
    default: 0
  },
  /** 禁止选择 */
  disabled: {
    type: Boolean,
    default: false
  },
  /** 允许选择半个 */
  half: {
    type: Boolean,
    default: false
  },
  /** 尺寸大小，同时设置宽高的值(内置sm、lg、xl), 默认单位为rpx */
  size: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value) || TuniaoSizes.includes(value as TuniaoSize)
    }
  },
  /** 选中时的图标 */
  activeIcon: {
    type: String,
    default: 'star-fill'
  },
  /** 未选中时的图标 */
  inactiveIcon: {
    type: String,
    default: 'star'
  },
  /** 选中时的颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  activeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 未选中时的颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  inactiveColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 图标之间的距离, 单位rpx */
  gutter: {
    type: [String, Number],
    default: ''
  },
  /** 自定义数据 */
  customData: {
    type: Array as PropType<Array<RateCustomData>>,
    default: (): Array<RateCustomData> => {
      return []
    }
  }
}
export type RateProps = ExtractPropTypes<typeof rateProps>

export const rateEmits = {
  [UPDATE_MODEL_EVENT]: (value: number) => typeof value === 'number',
  'change': (value: number) => typeof value === 'number'
}
export type RateEmits = typeof rateEmits
